<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <template>
            <a-col :md="6" :sm="8">
              <a-form-item label="用户姓名">
                <a-input
                  placeholder="请输入用户姓名查询"
                  v-model="queryParam.realName"
                ></a-input>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item label="手机号码">
                <a-input
                  placeholder="请输入手机号码查询"
                  v-model="queryParam.mobile"
                ></a-input>
              </a-form-item>
            </a-col>
          </template>

          <a-col :md="6" :sm="8">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="resetParam"
                icon="reload"
                style="margin-left: 8px"
                >重置
              </a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="userId"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="avatarslot" slot-scope="text, record">
          <div class="anty-img-wrap">
            <a-avatar
              shape="square"
              :src="getAvatarView(record.avatar)"
              icon="user"
            />
          </div>
        </template>

        <!--				<span slot="loginNumber" slot-scope="text, record">-->
        <!--					<a @click="showTable(record)">在线 {{record.loginNumber}}</a>-->
        <!--					&lt;!&ndash; <a @click="handleEdit(record)">编辑</a> &ndash;&gt;-->
        <!--				</span>-->

        <span slot="action" slot-scope="text, record">
          <a @click="showTable(record)" :disabled="handlerDisabled(record)"
            >强制下线</a
          >
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <user-online-model ref="model" @dataUpdate="loadData"></user-online-model>
  </a-card>
</template>	

<script>
import UserOnlineModel from "./modules/UserOnlineModel";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import Vue from "vue";

export default {
  name: "UserOnline",
  mixins: [JeecgListMixin],
  components: {
    UserOnlineModel,
  },
  data() {
    return {
      description: "这是用户管理页面",
      queryParam: {
        mobile: "",
        realName: "",
        userType: undefined,
      },
      recycleBinVisible: false,
      columns: [
        {
          title: "用户账号",
          align: "center",
          dataIndex: "loginName",
          width: 120,
        },
        {
          title: "用户姓名",
          align: "center",
          width: 100,
          dataIndex: "realName",
        },
        {
          title: "手机号码",
          align: "center",
          width: 100,
          dataIndex: "mobile",
        },
        {
          title: "邮箱",
          align: "center",
          width: 100,
          dataIndex: "email",
        },
        {
          title: "登录数量",
          dataIndex: "loginNumber",
          scopedSlots: {
            customRender: "loginNumber",
          },
          align: "center",
          width: 100,
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: {
            customRender: "action",
          },
          align: "center",
          width: 170,
        },
      ],
      url: {
        list: "/sys/user/online-page",
      },
    };
  },
  computed: {},
  mounted() {},
  methods: {
    resetParam() {
      this.queryParam = {};
      this.queryParam.userType = undefined;
      this.loadData(1);
    },
    showTable(record) {
      //   console.log(record.loginNumber, "------record.loginNumber------");
      this.$refs.model.setUserID(record.userId, record.loginName);
      this.$refs.model.showModel(true);
    },

    handlerDisabled(record) {
      console.log("判断是否为当前用户");
      console.log(record);
      if (
        record.loginClientDTOList.length == 1 &&
        record.loginClientDTOList[0].token.indexOf(Vue.ls.get(ACCESS_TOKEN)) !==
          -1
      ) {
        console.log(record, "当前账户并且登录数量为一");
        return true;
      }
      return false;
    },
  },
};
</script>
<style scoped>
</style>
